<template>
  <div class="authority">
    <a-card :bordered="false" class="left">
      <p>
        部门:
        <a-select
          class="select-selection"
          v-model="department"
          @change="handleDepartmentChange"
        >
          <a-select-option
            v-for="item in departmentArr"
            :key="item.value"
            :value="item.value"
            >{{ item.lable }}</a-select-option
          >
        </a-select>
      </p>
      <p>
        职业:
        <a-select
          class="select-selection"
          v-model="profession"
          @change="handleProfessionChange"
        >
          <a-select-option
            v-for="item in professionArr"
            :key="item.value"
            :value="item.value"
            >{{ item.lable }}</a-select-option
          >
        </a-select>
      </p>
    </a-card>
    <a-card :bordered="false" class="right">
      <div class="right-content">
        <c-form-model
          checkStrictly
          @onTreeCheck="onTreeCheck"
          :datas="formData"
          v-model="form"
          ref="formModels"
        ></c-form-model>
        <a-skeleton v-if="formData[0].typeData == 0" />
      </div>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";
import { getBaseResourceList } from "@/api/mallSystem/role";
import { refactoringArr, getParent, findChildIdArr } from "@/util/common";

export default {
  name: "Authority",
  components: {},
  data() {
    return {
      departmentArr: [
        {
          value: "0",
          lable: "部门1"
        },
        {
          value: "1",
          lable: "部门1"
        },
        {
          value: "2",
          lable: "部门1"
        }
      ],
      department: "1",
      profession: "",
      professionArr: [],
      formData: [
        {
          label: "职位权限",
          prop: "resourceIds",
          type: "tree",
          typeData: [],
          defaultExpandAll: false,
          replaceFields: {
            children: "children",
            title: "resourceName",
            key: "id"
          }
        }
      ],
      form: {
        resourceIds: []
      }
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    this.onResourceList();
  },
  mounted() {},
  methods: {
    refactoringArr,
    onResourceList() {
      getBaseResourceList().then(res => {
        this.formData[0].typeData = refactoringArr(res.data, "", 0);
      });
    },
    onTreeCheck(checkedKeys, eventKey, checked) {
      let idArr = [];
      if (checked) {
        checkedKeys.map(id => {
          return getParent(this.formData[0].typeData, id).map(item => {
            return idArr.push(item.id);
          });
        });
      } else {
        let deleteArr = findChildIdArr(this.formData[0].typeData, eventKey);
        idArr = checkedKeys;
        idArr = idArr.filter(item => {
          let idList = deleteArr.map(v => v);
          return !idList.includes(item);
        });
      }
      this.$refs.formModels.changeTreeCheck([...new Set(idArr)]);
    },
    handleDepartmentChange() {},
    handleProfessionChange() {}
  }
};
</script>

<style lang="less" scoped>
.authority {
  background: #f0f2f5;
  min-height: 300px;
  display: flex;
  .left {
    width: 350px;
    margin-right: 10px;
  }
  .right {
    flex: 1;
    .right-content {
      width: 300px;
    }
  }
}
</style>
